<template>
  <div>
      <div class="smain">
        <!-- 左侧订单信息 -->
        <div class="box-left">
            <h3>订单信息</h3>
            <table>
                <tr>
                    <td>收货地址:</td>
                    <td>李永权,18703490664,广东省 中市 石岐区街道 电子科技大学中山学院18栋宿舍楼720舍，000000</td>
                </tr>
                <tr>
                    <td>买家留言:</td>
                    <td>-</td>
                </tr>
                <tr>
                    <td>订单编号:</td>
                    <td>1944154191249684301</td>
                </tr>
                <tr>
                    <td>商家:</td>
                    <td>老东家食品专营店</td>
                </tr>
            </table>
        </div>
        <!-- 右侧订单状态  -->
        <div class="box-right">
            <span><img src="@/assets/images/success.png" alt="">&nbsp;&nbsp;&nbsp;订单状态：交易成功</span>
            <ul>
                <li>物流：<span>韵达快递</span>&nbsp;
                    <div>
                        <div class="time">2021-07-14 12:01:02</div>
                        <p>【代收点】您的快件已签收，签收人在【电子科技大学中山学院聚宝屋(学院路1号)】领取，投诉电话：020-23393006。起早摸黑不停忙，如有不妥您见谅，好评激励我向上，求个五星暖心房。</p>
                    </div>
                </li>
            </ul>
        </div>
        <!-- 中间包裹部分 -->
        <table class="packtable">
            <tr>
                <td colspan="3">商品</td>
                <td>单价</td>
                <td>数量</td>
                <td>优惠</td>
                <td>状态</td>
            </tr>
            <tr>
                <td colspan="7">
                    <p>包裹1韵达快递运单号:43159867264732021-07-14 12:01:02【代收点】您的快件已签收，签收人在【电子科技大学中山学院聚宝屋(学院路1号)】领取</p>
                </td>
            </tr>
            <tr>
                <td colspan="3"><img src="@/assets/images/test1.jpg" alt="">
                    <p>超级科技，网红的最佳选择，放在家里一整天，省电整整三百度，最佳伴侣，拍摄爱好者的福音，最好的性价比产物</p>
                </td>
                <td>￥<span>24.80</span></td>
                <td>1</td>
                <td></td>
                <td>交易成功</td>
            </tr>
        </table>
        <!-- 下侧款项 -->
        <div class="money">
            <p>返积分<span>9</span>点</p>
            <table>
                <tr>
                    <td>商品总价：</td>
                    <td>￥<span>0.00</span></td>
                </tr>
                <tr>
                    <td>快递（运费）：</td>
                    <td>￥<span>5.00</span></td>
                </tr>
                <tr>
                    <td>店铺优惠：</td>
                    <td>￥<span>24.80</span></td>
                </tr>
                <tr>
                    <td>实付款：</td>
                    <td>￥<span>19.80</span></td>
                </tr>
                <tr>
                    <td></td>
                    <td class="refund"><router-link to="/"><p style="color:red;text-decoration:underline;top:120px;right:55px;">退款</p></router-link></td>
                </tr>
            </table>
        </div>
    </div>
  </div>
</template>

<script>
import "@/assets/css/base.css"
import "@/assets/css/common.css"
import "@/assets/css/order.css"

export default {
    name : "OrderDetail"
}
</script>

<style>

</style>